<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{~/css/bootstrap-magic.css}" />
    <link rel="stylesheet" th:href="@{~/css/register.css}" />
    <script th:src="@{~/js/jquery-3.1.1.js}" type="text/javascript"></script>
    <style>
        body{
            background: #FFFFFF url(/img/1.jpg) left top no-repeat;
            background-attachment: fixed;
            background-size: 100%;
        }
    </style>
</head>

<body>
<div class="container">
    <form class="form-signin" th:action="@{/register/validate}" th:method="post" onsubmit="return check()">
        <h2 class="form-signin-heading">欢迎注册</h2>
        <hr class="featurette-divider">
        <label for="accountName" class="sr-only">Username</label>
        <input type="text" name="accountName" id="accountName" class="form-control" placeholder="请输入用户名" required autocomplete="off" autofocus />
        <div class="errorDiv" id="accountNameError"></div>

        <label for="password" class="sr-only">Password</label>
        <input type="password" name="password" id="password" class="form-control" placeholder="请输入密码" required />
        <div class="errorDiv" id="passwordError"></div>

        <label for="confirmPassword" class="sr-only">ConfirmPassword</label>
        <input type="password" name="confirmPassword" id="confirmPassword" class="form-control" placeholder="请再次输入密码" required />

        <label for="userCaptcha" class="sr-only">Captcha</label>
        <input type="text" name="userCaptcha" id="userCaptcha" class="form-control" placeholder="请输入验证码" required />
        <img border=0 id="captchaImg" alt="点击重新加载" th:src="@{/login/captcha}" onclick="changeCaptcha()"/>
        <div class="errorDiv" id="captchaError" th:if="${captchaError}!=null" th:text="${captchaError}"></div>

        <button class="btn btn-lg btn-primary btn-block" type="submit">提交</button>

        <footer class="container">
            <p class="float-right">
                <span>已有账户？请</span><a th:href="@{/login}">登录</a>
            </p>
            <hr class="featurette-divider">
        </footer>
    </form>
</div>
<!-- /container -->
<script type="text/javascript">
    function changeCaptcha(){
        document.getElementById("captchaImg").setAttribute('src', '/login/captcha?' + Math.random());
    }

    function check() {
        // 校验用户输入的密码是否正确
        var result = true;
        var password = document.getElementById('password').value;
        var confirmPassword = document.getElementById('confirmPassword').value;
        if (password !== confirmPassword){
            result = false;
            document.getElementById('passwordError').innerText='请确认密码是否输入正确';
        }
        // Ajax请求，判断账户名是否已经被注册
        var accountName = $('#accountName').val();
        $.ajax({
            type : 'get',
            url: '/register/check/' + accountName,
            contentType : 'application/json;charset=UTF-8',
            dataType : 'text',
            success : function(data,textStatus,jqXHR){
                if (data === 'true'){
                    result = false;
                    document.getElementById('accountNameError').innerText='该账户名已经被注册';
                }
            },
            error: function (err) {
                console.log('ajax错误码:'+err.status);
            }
        });
        return result;
    }
</script>
</body>
</html>